<template>
  <el-card>
    <!--基本信息  -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <template>
          <el-descriptions title="基本信息">
            <el-descriptions-item label="员工编号">{{ driverInfo.userId }}</el-descriptions-item>
            <el-descriptions-item label="司机名称">{{ driverInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="所属机构">{{ driverInfo.agency.name }}</el-descriptions-item>
            <el-descriptions-item label="电话">
              <el-tag size="small">{{ driverInfo.mobile }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="年龄">{{ driverInfo.age }}</el-descriptions-item>
          </el-descriptions>
        </template>
      </el-tab-pane>
      <!-- 驾驶信息 -->
      <el-tab-pane label="驾驶信息" name="second">
        <el-descriptions title="驾驶信息" :column="3">
          <el-descriptions-item label="驾驶证号">{{ driverInfo2.licenseNumber }}</el-descriptions-item>
          <el-descriptions-item label="准驾车型">{{ driverInfo2.allowableType }}</el-descriptions-item>
          <el-descriptions-item label="初次领证日期">{{ driverInfo2.initialCertificateDate }}</el-descriptions-item>
          <el-descriptions-item label="驾驶有效期限">
            <el-tag size="small">{{ driverInfo2.validPeriod }}年</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="驾龄">{{ driverInfo2.driverAge }}年</el-descriptions-item>
          <el-descriptions-item label="驾驶证类型">{{ driverInfo2.licenseType }}</el-descriptions-item>
          <el-descriptions-item label="从业资格证">{{ driverInfo2.qualificationCertificate }}</el-descriptions-item>
          <el-descriptions-item class="passCertificate" label="入场信息" :span="2">{{ driverInfo2.passCertificate }}</el-descriptions-item>
          <!-- <el-descriptions-item :colon="false" /> -->
          <el-descriptions-item label="图片信息">
            <ImageUpload ref="userInfoImage" />
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script>
import { getDriverDetail, getDriverDetail2 } from '@/api/empolyee/driver'
// 引入图片上传组件
import ImageUpload from '@/components/ImageUpload'

export default {
  components: { ImageUpload },
  data() {
    return {
      userId: this.$route.params.id, // id是userid，只不过路由中拼接的是id。不是userid。
      activeName: 'first',
      driverInfo: {
        userId: '',
        name: '',
        agency: { name: '' },
        mobile: '',
        age: 0
      },
      driverInfo2: {
        licenseNumber: '',
        allowableType: '',
        initialCertificateDate: '',
        validPeriod: '',
        driverAge: 0,
        age: 0,
        licenseType: '',
        qualificationCertificate: '',
        passCertificate: '',
        picrure: ''
      }
      // colon: false
    }
  },
  created() {
    console.log(44, this.userId)
    this.getDriverDetail()
    this.getDriverDetail2()
  },
  methods: {
    // 司机基本信息
    async getDriverDetail() {
      console.log(50, this.userId)
      const res = await getDriverDetail(this.userId)
      // console.log(52, res)
      this.driverInfo = res.data
    },
    // 司机驾驶信息
    async getDriverDetail2() {
      console.log(222)
      const res = await getDriverDetail2(this.userId)
      // console.log(67, res)
      this.driverInfo2 = res.data
      if (this.driverInfo2.picture) {
        this.$refs.userInfoImage.fileList = [
          { url: this.driverInfo2.picture }
        ]
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scope>
.passCertificate{
  padding-right: 200px;
}

</style>
